<template>
	<view class="audit-container">
		<uv-toast ref="toast"></uv-toast>
		<view class="header">
			<text class="title">商户认证</text>
			<text class="subtitle">Verify Your Store</text>
		</view>

		<scroll-view scroll-y class="form-container">
			<!-- 结算信息 -->
			<view class="form-section">
				<view class="section-title">
					<uv-icon name="money-exchange-settlement" size="32" color="#3c9cff"
						custom-prefix="custom-icon"></uv-icon>
					<text>结算信息</text>
				</view>

				<view class="input-group">
					<text class="label required">开户行</text>
					<uv-input v-model="formData.bankName" placeholder="请输入开户行名称" />
					<text v-if="formErrors.bankName" class="error-tip">{{ formErrors.bankName }}</text>
				</view>

				<view class="input-group">
					<text class="label required">银行账号</text>
					<uv-input v-model="formData.bankAccount" placeholder="请输入银行账号" type="number" />
					<text v-if="formErrors.bankAccount" class="error-tip">{{ formErrors.bankAccount }}</text>
				</view>
			</view>

			<!-- 营业执照上传 -->
			<view class="form-section">
				<view class="section-title">
					<uv-icon name="camera" size="32" color="#3c9cff"></uv-icon>
					<text>证件上传</text>
				</view>

				<view class="upload-section">
					<text class="label required">营业执照</text>

					<!-- 上传按钮 -->
					<view class="upload-area" v-if="!formData.businessLicense" @tap="uploadImage">
						<view class="upload-button">
							<uv-icon name="camera-fill" size="44" color="#3c9cff"></uv-icon>
							<text>上传营业执照</text>
						</view>
					</view>

					<!-- 图片预览区 -->
					<view class="preview-area" v-else>
						<image class="preview-image" :src="formData.businessLicense" mode="aspectFill" />
						<!-- 删除按钮 -->
						<view class="delete-btn" @tap.stop="deleteImage">
							<uv-icon name="close" color="#fff" size="20"></uv-icon>
						</view>
						<!-- 重新上传蒙层 -->
						<view class="preview-mask" @tap="uploadImage">
							<uv-icon name="reload" size="30" color="#fff"></uv-icon>
							<text>重新上传</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮 -->
		<view class="footer">
			<button class="submit-btn" :class="{ 'loading': isSubmitting }" @tap="handleSubmit">提交审核</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			contactPhone: {
				type: String,
				required: true
			},
			address: {
				type: String,
				required: true
			},
			district: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				formData: {
					bankName: '',
					bankAccount: '',
					businessLicense: ''
				},
				formErrors: {
					bankName: '',
					bankAccount: '',
					businessLicense: ''
				},
				isSubmitting: false,
				uploadedImage: '', // 记录上传的图片路径
				hasUnsavedImage: false // 是否有未保存的图片
			}
		},

		methods: {
			showToast(msg, type = 'default', duration = 2000) {
				this.$refs.toast.show({
					message: msg,
					type: type,
					duration: duration
				})
			},

			validateForm() {
				let isValid = true
				// 重置错误信息
				Object.keys(this.formErrors).forEach(key => {
					this.formErrors[key] = ''
				})

				// 验证必填字段
				if (!this.formData.bankName) {
					this.formErrors.bankName = '请输入开户行名称'
					isValid = false
				}

				if (!this.formData.bankAccount) {
					this.formErrors.bankAccount = '请输入银行账号'
					isValid = false
				}

				if (!this.formData.businessLicense) {
					this.formErrors.businessLicense = '请上传营业执照'
					isValid = false
				}

				return isValid
			},

			async uploadImage() {
				try {
					if (this.hasUnsavedImage && this.uploadedImage) {
						await this.deleteUnsavedImage()
					}

					const res = await this.$http.urlImgUpload('/auth/merchant/image/upload', {
						name: 'file',
						maxSize: 1024 * 1024 * 5,
						count: 1
					})

					if (res) {
						this.formData.businessLicense = res[0]
						this.uploadedImage = res[0]
						this.hasUnsavedImage = true
						this.showToast('上传成功', 'success')
					}
				} catch (e) {
					this.showToast('上传失败', 'error')
				}
			},

			async deleteImage() {
				try {
					if (this.hasUnsavedImage && this.uploadedImage) {
						await this.deleteUnsavedImage()
					}
					this.formData.businessLicense = ''
					this.uploadedImage = ''
					this.hasUnsavedImage = false
				} catch (error) {
					console.error('删除图片失败', error)
				}
			},

			async deleteUnsavedImage() {
				try {
					await this.$http.post('/auth/merchant/image/delete', {
						image: this.uploadedImage
					})
				} catch (error) {
					console.error('删除图片失败', error)
				}
			},

			async handleSubmit() {
				if (!this.validateForm()) {
					const firstError = Object.values(this.formErrors).find(error => error)
					if (firstError) {
						this.showToast(firstError, 'error')
					}
					return
				}

				this.isSubmitting = true
				try {
					const res = await this.$http.post('/auth/merchant/application/submit', this.formData)
					if (res) {
						this.hasUnsavedImage = false
						this.uploadedImage = ''
						this.showToast('提交成功', 'success')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				} catch (error) {
					this.showToast(error.msg || '提交失败', 'error')
				} finally {
					this.isSubmitting = false
				}
			}
		},

		// 页面生命周期钩子
		onUnload() {
			if (this.hasUnsavedImage) {
				this.deleteUnsavedImage()
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'merchant_audit.scss';
</style>